<script setup lang="ts">
import * as E from "effect";
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
import { init, EChartsType, EChartsOption } from "echarts";

type Resp = {
    code: number;
    message: string;
    data: {
        username: string | null;
        simpleNumber: string;
        mediaNumber: string;
        diffNumber: string;
        submitNumber: string;
        acceptNumber: string;
    }[];
};
/**
 *
 */
const divRef = ref<HTMLElement>();

const data = reactive<{
    option: EChartsOption | null;
    echart: EChartsType | null;
}>({
    option: null,
    echart: null,
});

const request = () =>
    axios.get<Resp>("http://localhost:8121/api/question_submit/getEcharts");

onMounted(
    () =>
        void E.pipe(
            E.Effect.promise(request),
            E.Effect.map(({ data: { data } }) => data),
            E.Effect.map(
                E.Array.map((item: Resp["data"][number]) => ({
                    username: item.username,
                    simpleNumber: parseInt(item.simpleNumber, 10),
                    mediaNumber: parseInt(item.mediaNumber, 10),
                    diffNumber: parseInt(item.diffNumber, 10),
                    submitNumber: parseInt(item.submitNumber, 10),
                    acceptNumber: parseInt(item.acceptNumber, 10),
                }))
            ),
            E.Effect.map((records) => {
                if (divRef.value === undefined) return;
                console.log(records);
                data.option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    legend: {},
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: records.map(
                                ({ username }) => username ?? "匿名用户"
                            ),
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                        },
                    ],
                    series: [
                        {
                            name: "Submitted",
                            type: "bar",
                            stack: "Total",
                            emphasis: {
                                focus: "series",
                            },
                            data: records.map(
                                ({ submitNumber, acceptNumber }) =>
                                    submitNumber - acceptNumber
                            ),
                        },
                        {
                            name: "Accepted",
                            type: "bar",
                            stack: "Total",
                            emphasis: {
                                focus: "series",
                            },
                            data: records.map(
                                ({ acceptNumber }) => acceptNumber
                            ),
                        },
                        {
                            name: "Simple",
                            type: "bar",
                            stack: "Difficulty",
                            emphasis: {
                                focus: "series",
                            },
                            data: records.map(
                                ({ simpleNumber }) => simpleNumber
                            ),
                        },
                        {
                            name: "Medium",
                            type: "bar",
                            stack: "Difficulty",
                            emphasis: {
                                focus: "series",
                            },
                            data: records.map(({ mediaNumber }) => mediaNumber),
                        },
                        {
                            name: "Hard",
                            type: "bar",
                            stack: "Difficulty",
                            emphasis: {
                                focus: "series",
                            },
                            data: records.map(({ diffNumber }) => diffNumber),
                        },
                    ],
                };

                data.echart = init(divRef.value);
                data.echart.setOption(data.option);
            }),
            E.Effect.runPromise
        )
);
</script>

<template>
    <div class="chart" ref="divRef"></div>
</template>

<style scoped>
.chart {
    width: 100vw;
    height: 90vh;
}
</style>
